<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fnx" uri="http://java.sun.com/jsp/jstl/functionsx"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="f" uri="http://www.sctv.com/tags/form"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="/WEB-INF/views/head.jsp"/>
    <style>
        .tabs{}
        .tabs li{float:left;background-color:#f4f4f4;border-left:1px solid #e2e2e2;border-top:1px solid #ddd;border-right:1px solid #ddd;margin-right:0px;}
        .tabs li a{color:#555555;float:left;text-decoration:none;padding:5px 12px;}
        .tabs li a:link,.tabs li a:visited,.tabs li a:hover,.tabs li a:active{text-decoration:none;}
        .tabs li.active{background-color:#FFFFFF;border-left:1px solid #ddd;border-top:1px solid #ddd;border-right:1px solid #ddd;}
        .tabs li.active a{color:#fff;background:#ed5565;border-color:#ed5565;}
        .tabs li.hover{background-color:#e7e7e7;border-left:1px solid #ddd;border-top:1px solid #ddd;border-right:1px solid #ddd;}
        .tabs li.hover a{color:#000;}
        .box-body{
            padding-right: 0;
            padding-bottom: 0;
        }
        .box-body .contItem{
            width: calc(33.33333333% - 10px);
            height: 298px;
            overflow: hidden;
            color: #898989;
            background: #ffffff;
            margin-right: 10px;
            margin-bottom: 10px;
            list-style: none;
            border: 1px solid rgb(230, 230, 230);
            box-shadow: 0px 0px 2px 1px rgb(230, 230, 230);
            border-radius: 4px;
            float: left;
        }
        .box-body .replace{
            background: #6694ff;
        }
        .itemTop{
            height: 218px;
            margin: 15px;
            position: relative;
        }
        .itemTop .itemIdx{
            display: block;
            height:30px;
            text-align: left;
            line-height: 25px;
        }
        .itemTop .moveArea{
            position: absolute;
            z-index:1;
            top: 0;
            left: 0;
            height: 100%;
            width:100%;
            cursor: move;
        }
        .itemTop .rsp-content{
            height: calc(100% - 30px);
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
            border:1px solid #e6e6e6;
        }
        .rsp-content img{
            width: 100%;
            height: 100%;
        }
        .rsp-content h3{
            position: absolute;
            background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.03) 90%, rgba(0, 0, 0, 0) 100%);
            color: #fff;
            width: 100%;
            height: 40px;
            padding-left: 10px;
            margin-bottom: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            bottom: 0;
            left: 0;
            font-size: 16px;
            line-height: 45px;
        }
        .nothing_icon{
            display: table;
            position: absolute;
            z-index: -10;
            top: 50%;
            left: 50%;
            margin: -20px 0 0 -30px;
            width: 60px;
            height: 40px;
            color: #b4b4b4;
            cursor: pointer;
        }
        .nothing .nothing_icon:after{
        content: '';
        display: table;
        height: 30px;
        position: absolute;
        top: 3px;
        left: 29px;
        border-left: 2px solid #d2d1d1;
        }
        .nothing .nothing_icon:before{
        content: '';
        display: table;
        width: 30px;
        position: absolute;
        top: 17px;
        left: 15px;
        border-top: 2px solid #d2d1d1;
        }
        .nothing .nothing_icon{
            z-index: 10;
        }
        .itemBottom{
            display: flex;
        }
        .itemBottom a{
            position: relative;
            border-width: 0;
            border-top-width: 1px;
            height: 48px;
            line-height: 37px;
            flex : 1 1 auto;
            display: block;
            border-color: #e0e0e0;
            color: #999999;
        }
        .itemBottom a:after{
            content: "";
            display: table;
            width: 0;
            height: 20px;
            margin-top: -10px;
            position: absolute;
            border-right: 2px solid #e0e0e0;
            top: 50%;
            right: 0;
        }
        .itemBottom a:hover:after{
            border-color: #ed5565;
        }
        .itemBottom a:last-child{
            border-top-right-radius: 0;
        }
        .itemBottom a:nth-child(1){
            border-top-left-radius: 0;
        }
        .itemBottom a:last-child:after{
            display: none;
        }
        .popIfram{
            width: 930px;
            height: 90%;
            position: absolute;
            z-index: -1;
            top: 5%;
            left: 50%;
            margin-left: -465px;
            background: #fff;
        }
        .popIfram>iframe{
            width: 930px;
            min-height: 100%;
            border: 0;
        }
        @media (max-width : 1000px) {
            .box-body .contItem{
                width: calc(50% - 10px);
            }
        }
    </style>
    <script>
      $(function() {
        $("#radio").buttonset();
        $("#sortHead").headSort();
        $("#tabs li").each(function(){
          $(this).hover(function(){
            if(!$(this).hasClass("active")) {
              $(this).addClass("hover");
            }
          },function(){
            $(this).removeClass("hover");
          });
        });

        addMoveEvent();
        addEventClick();
      });
      function addEventClick() {
        var iframe = $("div.popIfram");
        $("#tableRsp").on({
          click : function (e) {
            e.stopPropagation();
            if ($(e.target).hasClass("editor")) {
              var orderId=$(e.target).parent().parent().index();
              if(orderId=='0'){
                orderId="4";
              }else if(orderId=='1'){
                orderId="3";
              }else if(orderId=='2'){
                orderId="2";
              }else if(orderId=='3'){
                orderId="1";
              }else if(orderId=='4'){
                orderId="0";
              }
              location.href='focuslist.do?returnUrl=core/publish_center/node_choose_info&targetNodeId=${queryNodeId}&order='+orderId+"&foucs=1";
            }else if($(e.target).hasClass("btn-clear")){
//              var infoId=$(e.target).parent().prev().children().last().children().last().val();
              <%--if(infoId !=""){--%>
                <%--location.href='delfocusRefInfo.do?infoId='+infoId+'&targetNodeId=${queryNodeId}&orderId=';--%>
              <%--}--%>
            }
          }
        })
        $("#closeProp").on({
          click : function (e) {
            e.stopPropagation();
            iframe.css({
              zIndex : -1
            })
          }
        })
      }
      function addMoveEvent() {
        var li = null,
            ul = $("#tableRsp"),
            replace = 0,
            idx = 0,
            width = 0,
            downTime = new Date(),
            docBody = document.body,
            step = docBody.clientWidth < 1000 ? 2 : 3;
        $("#tableRsp").on({
          mousedown : function (e) {
            e.preventDefault();
            if (e.button === 2){
                return;
            }
            var tar = $(e.target),
                self = $(this),
                start = null,
                pointer = {
                  x : e.pageX,
                  y : e.pageY
                };
            if (tar.hasClass("moveArea")){
              createTemp(tar, function (newli, coord, i, w) {
                li = newli;
                start = coord;
                idx = i;
                replace = i;
                width = w;
              })
              var downTime = new Date();
              self.on({
                "mousemove.down" : function (e) {
                  var curTime = new Date();
                  if (curTime - downTime >= 20){
                    var move = {
                      x : e.pageX,
                      y : e.pageY
                    }
                    downTime = curTime;
                    moveItem(li, start, pointer, move, idx, ul, width, step, function (i) {
                      replace = i;
                    });
                  }
                },
                "mouseleave.down" : function (e) {
                  var len = ul.children().length;
                  self.off(".down");
                  if (li && replace < len - 1){
                    li.remove();
                    li = null;
                  }
                  if (replace < len - 1){
                    replaceItem(ul, idx, replace);
                  }
                },
                "mouseup.down" : function (e) {
                  var len = ul.children().length;
                  self.off(".down");
                  if (li && replace < len - 1){
                    li.remove();
                    li = null;
                    replaceItem(ul, idx, replace);
                  }
                }
              })
            }
          }
        })
        $(window).resize(function (e) {
            var curTime = new Date();
            if (curTime - downTime >= 20){
                if (docBody.clientWidth < 1000){
                    step = 2;
                }else {
                    step = 3;
                }
                downTime = curTime;
            }
        })

      }
      function confirmDelete() {
        return confirm("<s:message code='confirmDelete'/>");
      }
      function optSingle(opt) {
        if(Cms.checkeds("ids")==0) {
          alert("<s:message code='pleaseSelectRecord'/>");
          return false;
        }
        if(Cms.checkeds("ids")>1) {
          alert("<s:message code='pleaseSelectOne'/>");
          return false;
        }
        var id = $("input[name='ids']:checkbox:checked").val();
        var url = $(opt+id).attr("href");
        if(url) {
          location.href=$(opt+id).attr("href");
        } else {
          alert("<s:message code='noPermission'/>");
        }
      }
      function optMulti(form, action, confirmMsg) {
        if(Cms.checkeds("ids")==0) {
          alert("<s:message code='pleaseSelectRecord'/>");
          return false;
        }
        if(confirmMsg) {
          if($.isFunction(confirmMsg)) {
            if(!confirmMsg()) {
              return false;
            }
          } else {
            if(!confirm(confirmMsg)) {
              return false;
            }
          }
        }
        form.action=action;
        form.submit();
        return true;
      }
      function optDelete(form) {
        optMulti(form,"delete.do",confirmDelete);
      }
      function createTemp(tar, callBack) {
        var idx = $("div.moveArea").index(tar),
            ul = $("#tableRsp"), newli = null,
            self = ul.children().eq(idx),
            width = self.css("width");
            start = {
              x: self[0].offsetLeft,
              y: self[0].offsetTop
            };
        newli = self.clone().appendTo(ul).css({
          zIndex : "10",
          position : "absolute",
          top : start.y + "px",
          left : start.x + "px",
          width : width
        })
        callBack(newli, start, idx, parseInt(width));
      }
      function moveItem(self, start, pointer, move, idx, ul, w, step, callBack) {
        var x = move.x - pointer.x,
            y = move.y - pointer.y,
            left = start.x + x,
            top = start.y + y,
            yIdx = Math.ceil((y - 150) / 300),
            xIdx = Math.ceil((x - w / 2) / w),
            replace = idx + step * yIdx + xIdx;
        ul.children().eq(replace).addClass("replace").siblings().removeClass("replace");
        self.css({
          top : top + "px",
          left : left + "px"
        })
        callBack(replace);
      }
      function replaceItem(ul, idx, index) {
        var old = ul.children().eq(idx),
            newLi = ul.children().eq(index),
            clone = old.clone(),
            oldIdx = newLi.find("span.itemIdx>span"),
            newIdx = clone.find("span.itemIdx>span");
        newLi.removeClass("replace");
        if (idx === index ){
            return;
        }
        if (idx === index ){
          return;
        }
        old.replaceWith(newLi);
        if (index === 0){
          ul.prepend(clone);
        }else {
          ul.children().eq(index - 1).after(clone);
        }
        oldIdx.text(idx + 1);
        newIdx.text(index + 1);

        var newOrder=idx;
        var order=index;
        if(order=='0'){
          order="4";
        }else if(order=='1'){
          order="3";
        }else if(order=='2'){
          order="2";
        }else if(order=='3'){
          order="1";
        }else if(order=='4'){
          order="0";
        }
        if(newOrder=='0'){
          newOrder="4";
        }else if(newOrder=='1'){
          newOrder="3";
        }else if(newOrder=='2'){
          newOrder="2";
        }else if(newOrder=='3'){
          newOrder="1";
        }else if(newOrder=='4'){
          newOrder="0";
        }
       var  infoId = $(newLi.find("input:hidden")).val();
       var newInfoId= $(clone.find("input:hidden")).val();

       if(typeof(infoId)=="undefined" && typeof(newInfoId)=="undefined"){
         return;
       }
       $.ajax({
          type:"post",
          dataType:"json",
          url:'updateOrder.do',
          data:{"infoId":infoId,"newInfoId":newInfoId,"newOrder":newOrder,"order":order},
          success: function (data) {
//            if (data != "") {
//                alert("data:"+data);
//            }
          }
        });
      }
    </script>
</head>
<body class="skin-blue content-body" id="load">
<jsp:include page="/WEB-INF/views/commons/show_message.jsp"/>
<div class="content-header">
    <h1>焦点</h1>
    <shiro:hasPermission name="core:sinatv:generationTv01">
    <button class="btn btn-default" style="margin-top: 5px;" type="button" onclick="$('#load').showLoading();location.href='/cmscp/core/generation/generationDataByNode.do?jspUrl=core/publish_center/focus_list&returnUrl=/cmscp/core/pub_center/focuslist&queryNodeId=${queryNodeId}';">生成</button>
    </shiro:hasPermission>

</div>
<div class="content">
    <div class="box box-primary" style="margin-bottom: 50px">
        <ul class="box-body table-responsive" id="tableRsp">
            <li class="contItem">
                <div class="itemTop <c:if test="${empty live1}">nothing</c:if>">
                    <div class="moveArea"></div>
                    <span class="itemIdx">焦点图：<span>1</span></span>
                    <span class="nothing_icon editor"></span>
                    <div class="rsp-content">
                        <c:choose>
                            <c:when test="${!empty live1}">
                                <img src="${live1.detail.smallImage}" alt="图片未加载" onerror="this.src='${ctx}/static/img/no.png'">
                                <h3>${live1.detail.title}</h3>
                                <input  type="hidden" value="${live1_id}"/>
                            </c:when>
                            <c:otherwise>
                                <%--<img src="" alt="图片未加载" onerror="">--%>
                                <%--<h3></h3>--%>
                                <%--<input  type="hidden" value=""/>--%>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
                <c:choose>
                    <c:when test="${!empty live1}">
                        <div class="itemBottom btn-group">
                            <a href="javascript:;" class="btn btn-default">编辑原文</a>
                            <a href="delfocusRefInfo.do?infoId=${live1_id}&targetNodeId=${queryNodeId}&orderId" class="btn btn-default btn-clear">清除</a>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="itemBottom btn-group">
                            <a href="javascript:;" class=" btn btn-default">编辑原文</a>
                            <a href="javascript:;" class="btn btn-default btn-clear">清除</a>
                        </div>
                    </c:otherwise>
                </c:choose>
            </li>
            <li class="contItem">
                <div class="itemTop <c:if test="${empty live2}">nothing</c:if>">
                    <div class="moveArea"></div>
                    <span class="itemIdx">焦点图：<span>2</span></span>
                    <span class="nothing_icon editor"></span>
                    <div class="rsp-content">
                        <c:choose>
                            <c:when test="${!empty live2}">
                                <img src="${live2.detail.smallImage}" alt="图片未加载" onerror="this.src='${ctx}/static/img/no.png'">
                                <h3>${live2.detail.title}</h3>
                                <input  type="hidden" value="${live2_id}"/>
                            </c:when>
                            <c:otherwise>

                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
                <c:choose>
                    <c:when test="${!empty live2}">
                        <div class="itemBottom btn-group">
                            <a href="javascript:;" class=" btn btn-default">编辑原文</a>
                            <a href="delfocusRefInfo.do?infoId=${live2_id}&targetNodeId=${queryNodeId}&orderId" class="btn btn-default btn-clear">清除</a>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="itemBottom btn-group">
                            <a href="javascript:;" class=" btn btn-default">编辑原文</a>
                            <a href="javascript:;" class="btn btn-default btn-clear">清除</a>
                        </div>
                    </c:otherwise>
                </c:choose>
            </li>
            <li class="contItem">
                <div class="itemTop <c:if test="${empty live3}">nothing</c:if>">
                    <div class="moveArea"></div>
                    <span class="itemIdx">焦点图：<span>3</span></span>
                    <span class="nothing_icon editor"></span>
                    <div class="rsp-content">
                        <c:choose>
                            <c:when test="${!empty live3}">
                                <img src="${live3.detail.smallImage}" alt="图片未加载" onerror="this.src='${ctx}/static/img/no.png'">
                                <h3>${live3.detail.title}</h3>
                                <input  type="hidden" value="${live3_id}"/>
                            </c:when>
                            <c:otherwise>

                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
                <c:choose>
                    <c:when test="${!empty live3}">
                        <div class="itemBottom btn-group">
                            <a href="javascript:;" class=" btn btn-default">编辑原文</a>
                            <a href="delfocusRefInfo.do?infoId=${live3_id}&targetNodeId=${queryNodeId}&orderId" class="btn btn-default btn-clear">清除</a>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="itemBottom btn-group">
                            <a href="javascript:;" class=" btn btn-default">编辑原文</a>
                            <a href="javascript:;" class="btn btn-default btn-clear">清除</a>
                        </div>
                    </c:otherwise>
                </c:choose>
            </li>
            <li class="contItem">
                <div class="itemTop <c:if test="${empty live4}">nothing</c:if>">
                    <div class="moveArea"></div>
                    <span class="itemIdx">焦点图：<span>4</span></span>
                    <span class="nothing_icon editor"></span>
                    <div class="rsp-content">
                        <c:choose>
                            <c:when test="${!empty live4}">
                                <img src="${live4.detail.smallImage}" alt="图片未加载" onerror="this.src='${ctx}/static/img/no.png'">
                                <h3>${live4.detail.title}</h3>
                                <input  type="hidden" value="${live4_id}"/>
                            </c:when>
                            <c:otherwise>

                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
                <c:choose>
                    <c:when test="${!empty live4}">
                        <div class="itemBottom btn-group">
                            <a href="javascript:;" class="btn btn-default">编辑原文</a>
                            <a href="delfocusRefInfo.do?infoId=${live4_id}&targetNodeId=${queryNodeId}&orderId" class="btn btn-default btn-clear">清除</a>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="itemBottom btn-group">
                            <a href="javascript:;" class="btn btn-default">编辑原文</a>
                            <a href="javascript:;" class="btn btn-default btn-clear">清除</a>
                        </div>
                    </c:otherwise>
                </c:choose>
            </li>
            <li class="contItem">
                <div class="itemTop <c:if test="${empty live5}">nothing</c:if>">
                    <div class="moveArea"></div>
                    <span class="itemIdx">焦点图：<span>5</span></span>
                    <span class="nothing_icon editor"></span>
                    <div class="rsp-content">
                        <c:choose>
                            <c:when test="${!empty live5}">
                                <img src="${live5.detail.smallImage}" alt="图片未加载" onerror="this.src='${ctx}/static/img/no.png'">
                                <h3>${live5.detail.title}</h3>
                                <input  type="hidden" value="${live5_id}"/>
                            </c:when>
                            <c:otherwise>

                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
                <c:choose>
                    <c:when test="${!empty live5}">
                        <div class="itemBottom btn-group">
                            <a href="javascript:;" class="btn btn-default">编辑原文</a>
                            <a href="delfocusRefInfo.do?infoId=${live5_id}&targetNodeId=${queryNodeId}&orderId" class="btn btn-default btn-clear">清除</a>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="itemBottom btn-group">
                            <a href="javascript:;" class="btn btn-default">编辑原文</a>
                            <a href="javascript:;" class="btn btn-default btn-clear">清除</a>
                        </div>
                    </c:otherwise>
                </c:choose>
            </li>

        </ul>
    </div>
</div>

</body>
</html>